<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>成绩管理</title>
  <link href="http://libs.baidu.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <link href="../../css/style.css" rel="stylesheet">
  <style>
    .container form.row {
      display: flex;
      justify-content: space-between;
      padding: 15px 0;
    }

    .container form.row .form-group {
      padding: 0 3px;
    }

    .container form.row .form-group button {
      width: 100%;
    }
  </style>
</head>

<body>
  <div class="shadow-box"></div>
  <div class="container">
    <form class="row">
      <div class="form-group col-xs-2">
        <select class="form-control" name="" id="">
          <option value="" selected>-学期-</option>
          <option value="">2019-2020-2</option>
          <option value="">2019-2020-1</option>
          <option value="">2018-2019-2</option>
          <option value="">2018-2019-1</option>
          <option value="">2017-2018-2</option>
          <option value="">2017-2018-1</option>
          <option value="">2016-2017-2</option>
          <option value="">2016-2017-1</option>
        </select>
      </div>
      <div class="form-group col-xs-2">
        <input type="text" class="form-control" id="exampleInputEmail1" placeholder="课程名称">
      </div>
      <div class="form-group col-xs-1">
        <input type="text" class="form-control" id="exampleInputEmail1" placeholder="课程编号">
      </div>
      <div class="form-group col-xs-1">
        <input type="text" class="form-control" id="exampleInputEmail1" placeholder="任课教师">
      </div>
      <div class="form-group col-xs-1">
        <input type="text" class="form-control" id="exampleInputEmail1" placeholder="教师工号">
      </div>
      <div class="form-group col-xs-2">
        <select class="form-control" name="" id="">
          <option value="" selected>-专业-</option>
          <option value="">机电设备安装与维修</option>
          <option value="">中餐烹饪与营养膳食</option>
          <option value="">计算机应用</option>
          <option value="">汽车应用与维修</option>
          <option value="">有色金属冶炼</option>
          <option value="">高星级饭店运营与管理</option>
          <option value="">园林技术</option>
          <option value="">民族音乐与舞蹈</option>
          <option value="">美发与形象设计</option>
          <option value="">电子电器应用与维修</option>
        </select>
      </div>
      <div class="form-group col-xs-1">
        <select class="form-control" name="" id="">
          <option value="" selected>-状态-</option>
          <option value="">未提交</option>
          <option value="">待审核</option>
          <option value="">已审核</option>
        </select>
      </div>
      <div class="form-group col-xs-1">
        <button type="submit" class="btn btn-default">查询</button>
      </div>
    </form>
    <div class="row">
      <table class="table table-bordered table-hover ">
        <thead>
          <tr class="table-brand">
            <td colspan="12">课程导入</td>
          </tr>
          <tr>
            <th>序号</th>
            <th>学期</th>
            <th>课程名称</th>
            <th>课程编号</th>
            <th>课程代码</th>
            <th>任课老师</th>
            <th>教师工号</th>
            <th>专业名称</th>
            <th>学生人数</th>
            <th>更新时间</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tr>
          <td>1</td>
          <td>2019-2020-1</td>
          <td>计算机基础</td>
          <td>2019-2020-1-051600-01</td>
          <td>051600</td>
          <td>刘一</td>
          <td>1001</td>
          <td>计算机应用</td>
          <td>60</td>
          <td>2020-06-12</td>
          <td>已审核</td>
          <td>
            <button class="btn-link">修改</button> |
            <button class="btn-link">删除</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
  <script>
    let tbody = document.querySelector('table tbody');
    for (let i = 0; i < 8; i++) {
      let tr = document.querySelectorAll('table tr')[2].cloneNode(true);
      tbody.appendChild(tr)
    }
  </script>
</body>

</html>